<template>
  <div class="row">
    <div class="col-lg-4 col-md-6" v-for="(item, index) in articleArr" :key="index">
      <router-link :to="{ path: 'detail', query: { id: item.id } }">
        <div class="card mb-3" style="width: 100%;">
          <div class="imgbox">
            <img :src="imgUrl(item.src)" class="card-img-top" :alt="item.title">
          </div>
          <div class="card-body">
            <h5 class="card-title ellipsis-multiline">{{ item.title }}</h5>
            <p v-html="item.content" class="card-text ellipsis-multiline">
            </p>
            <div class="date-time">{{ formatDate(item.createAt) }}</div>
            <div class="d-flex justify-content-between">
              <router-link class="btn btn-sm " :to="{ path: 'detail', query: { id: item.id } }">点击详情</router-link>
              <span>{{ item.author }}</span>
            </div>
          </div>
        </div>
      </router-link>
    </div>
    <div v-if="articleArr.length == 0" class="mytext">
      <p>暂无更多数据~~</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { imgUrl, formatDate } from '@/api/index'
defineProps(['articleArr'])
// console.log({ props });





</script>

<style lang="less" scoped>
@import "../static/css/common.less";

.row {

  .mytext {
    width: 100%;
    height: 200px;
    color: @grey-color;
    text-align: center;
    padding-top: 50px;
  }

}

.card {
  transition: all .3s ease-in-out;

  &:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    transform: translateY(-5px);
  }

  .imgbox {
    width: 100%;
    height: 150px;

    img {
      width: 100%;
      height: 100%;

    }
  }
}

.card-body {
  p {
    width: 100%;
    color: @grey-color;
    font-weight: normal;
  }

  .date-time {
    font-size: 12px;
    color: @grey-color;
    margin-bottom: 15px;
  }

  .btn {
    background: #FFA500;
    color: rgb(255, 255, 255);

    &:hover {
      background-color: rgb(255, 165, 0, .8);
    }
  }


}
</style>
